<template>
	<view>
    <!-- 搜索框 -->
		<my-Search :focus="true"></my-Search>
    <!-- 搜索历史 -->
    <view class="history">
      <li v-if="suggestlist.length==0"><span>搜索历史</span><van-icon name="delete-o" @click="deleteHistory()" /></li>
      <view>
        <view 
        v-for="(item,index) in historylist" 
        :key="index" 
        @click="toGoodsList(item)">
          <van-tag
          size="large" 
          plain 
          type="primary" 
          >
          {{item}}
          </van-tag>
        </view>
      </view>
    </view>
    <!-- 搜索建议 -->
    <view class="suggest">
      <ul>
        <li v-for="item in suggestlist" :key="item.goods_id">
          <span>{{item.goods_name}}</span>
          <van-icon name="arrow" />
        </li>
      </ul>
    </view>
	</view>
</template>

<script>
	export default {
    onLoad(){
      // 对search组件的搜索建议数据进行转存
      uni.$on('setSuggest',res=>{
        this.suggestlist=res
      }),
      // 获取搜索历史数据，并对数据进行翻转处理
      uni.getStorage({
        key:'history',
        success:(res)=>{
          this.historylist.push(...res.data.reverse())
        }
      })
    },
		data() {
			return {
        // 搜索建议数据
				suggestlist:[],
        // 搜索历史数据
        historylist:[]
			};
		},
    methods:{
      // 清空搜索历史
      deleteHistory(){
        uni.removeStorage({
          key:'history'
        })
        this.historylist=[]
      },
      // 跳转商品页面
      toGoodsList(i){
        uni.navigateTo({
          url:"/subpkg/goods_list/goods_list"
        })
      }
    }
	}
</script>

<style>
  ul,li{
    padding: 0;
    margin: 0;
  },
  li{
    display: flex;
    align-items: center;
    list-style: none;
    border-bottom:1px #CCCCCC solid;
    height: 80rpx;
    padding: 0 12rpx 0 12rpx;
    justify-content: space-between;
  },
  li span{
    // 文字不允许换行（单行文本）
    white-space: nowrap;
    // 溢出部分隐藏
    overflow: hidden;
    // 文本溢出后，使用 ... 代替
    text-overflow: ellipsis;
    font-size: 24rpx;
  },
  .history{
    display: flex;
    flex-direction: column;
  }
  .history view{
    margin-top: 10rpx;
  }
  van-tag{
    margin: 0 12rpx 0 12rpx;
  }
</style>
